<!-- 个人数据 -->
<template>
	<view class="card d-flex">
		<view class="card_head d-flex mb-30">
			<text class="card_head_title w-bold">个人数据</text>
			<uv-notice-bar :text="text" direction="column" :icon="false" bgColor="transparent" color="#404040"></uv-notice-bar>
		</view>
		
		<view class="msg d-flex mb-20">
			<view class="msg_item mr-20 d-flex" @tap="onHref('/query/Credit/index?pageType=0')">
				<view class="msg_item_li bg1 d-flex relative">
					<text class="msg_title">信贷风险报告</text>
					<text class="msg_descripe">一份报告了解我的信用风险</text>
					<navigator class="btn">Go</navigator>
					
					<image src="/static/image/home/icon1.svg" class="icon1 icon absolute" mode="widthFix"></image>
				</view>
			</view>
			
			<view class="msg_item d-flex">
				<view class="msg_item_li bg2 d-flex" @tap="onHref('/query/Marriage/index')">
					<text class="msg_title">婚恋报告</text>
					<text class="msg_descripe">真诚换真情，恩爱更长久</text>
				</view>
				
				<view class="msg_item_li bg3 d-flex" @tap="onHref('/query/Housekeeping/index')">
					<text class="msg_title">家政服务</text>
					<text class="msg_descripe">数据精灵帮您了解陌生人</text>
				</view>
				
				<view class="msg_item_li bg4 d-flex" @tap="onHref('/query/Credit/index?pageType=1')">
					<text class="msg_title">3C租赁服务</text>
					<text class="msg_descripe">多维度征信数据，助力服务</text>
				</view>
			</view>
		</view>
		
		<view class="msg d-flex mb-20">
			<view class="msg_item mr-20 d-flex">
				<view class="msg_item_li bg5 d-flex" @tap="onHref('/query/Second/index')">
					<text class="msg_title">二手交易</text>
					<text class="msg_descripe">知己知彼，诚信交易</text>
				</view>
				
				<view class="msg_item_li bg6 d-flex" @tap="onHref('/query/PublicWelfare/index')">
					<text class="msg_title">公益志愿者</text>
					<text class="msg_descripe">大爱无疆，真诚奉献</text>
				</view>
				
				<view class="msg_item_li bg7 d-flex" @tap="onHref('/query/Security/index')">
					<text class="msg_title">安保护卫</text>
					<text class="msg_descripe">竭诚保平安，幸福千万家</text>
				</view>
			</view>
			
			<view class="msg_item d-flex">
				<view class="msg_item_li bg8 d-flex" @tap="onHref('/query/Adjustment/index')">
					<text class="msg_title">HR背调</text>
					<text class="msg_descripe">大数据助力人力资源服务</text>
				</view>
				
				<view class="msg_item_li bg1 flex-2 d-flex relative" @tap="onHref('/query/HealthCare/index')">
					<text class="msg_title">康养陪护</text>
					<text class="msg_descripe">真诚关爱，早日康复</text>
					
					<image src="/static/image/home/icon2.svg" class="icon2 icon absolute" mode="widthFix"></image>
				</view>
			</view>
		</view>
		
		
		<text class="footer mt-30">权威数据 客观实时 多维数据 安全隐私</text>
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	
	const text = reactive(['刚刚 150****9012查询了个人风险报告', '刚刚 150****9012查询了个人风险报告', '刚刚 150****9012查询了个人风险报告', '刚刚 150****9012查询了个人风险报告'])
	
	const onHref = url => {
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="scss" scoped>
.card {
	flex-direction: column;
	&_head {
		align-items: end;
		
		&_title {
			font: {
				size: 30rpx;
				weight: bold;
			}
		}
		
		.uv-notice-bar {
			padding: 0;
			margin-left: 10rpx;
		}
	}

	.msg {
		align-items: center;
		justify-content: space-between;
		height: 450rpx;
		
		&_item {
			flex: 1;
			height: 100%;
			flex-direction: column;
			
			&_li {
				flex: 1;
				padding: 25rpx 20rpx;
				border-radius: 14rpx;
				flex-direction: column;
				&:not(:last-child) {
					margin-bottom: 10rpx;
				}
				
				&.flex-2 {
					flex: 2.5
				}
				
				&.bg1 {
					background-color: rgba(229, 240, 255, 1);
				}
				
				&.bg2 {
					background-color: rgba(255, 226, 237, 1);
				}
				
				&.bg3 {
					background-color: rgba(255, 239, 215, 1);
				}
				
				&.bg4 {
					background-color: rgba(255, 232, 229, 1);
				}
				
				&.bg5 {
					background-color: rgba(219, 247, 255, 1);
				}
				
				&.bg6 {
					background-color: rgba(241, 234, 255, 1);
				}
				
				&.bg7 {
					background-color: rgba(229, 240, 255, 1);
				}
				
				&.bg8 {
					background-color: rgba(229, 240, 255, 1);
				}
				
				&.bg9 {
					background-color: rgba(224, 241, 249, 1);
				}
				
				.btn {
					margin-top: 30rpx;
					width: 120rpx;
					height: 55rpx;
					border-radius: 40rpx;
					text-align: center;
					line-height: 50rpx;
					color: #fff;
					background-color: rgba(95, 133, 255, 1);
					font: {
						weight: bold;
						size: 26rpx;
					}
				}
				
				.msg_title {
					margin-bottom: 10rpx;
					font: {
						size: 26rpx;
						weight: bold;
					}
				}
				
				.msg_descripe {
					color: #6C7282;
					font: {
						size: 22rpx;
					}
				}
				
				.icon {
					max-width: 100%;
					
					&.icon1 {
						top: 85rpx;
						left: 0;
						width: 100%;
					}
					&.icon2 {
						top: 100rpx;
						width: 180rpx;
					}
				}
			}
		}
	}

	.footer {
		color: #52525A;
		font: {
			size: 22rpx;
		}
	}
}
</style>